import DetailTitle from "@/components/DetailTitle";
import { Tooltip, Table, Tag, Button, Input } from "antd";
import styles from "./index.module.scss"
import downImg from "@/assets/images/discover/open-data/down.png"
import downzipImg from "@/assets/images/discover/open-data/downzip.png"
import classNames from "classnames";
import { useState } from "react";

const FileList = () => {
	const [selectedRowKeys, setSelectedRowKeys] = useState([]);
	const columns = [
		{
			title: 'File Name',
			key: 'fileName',
			dataIndex: 'a',
			width: 500,
		},
		{
			title: 'File Type',
			key: 'fileType',
			dataIndex: 'b',
			width: 100,
			render: (text, record, index) => (
				<Tag color="gold">{text}</Tag>
			),
		},
		{
			title: 'File Size',
			dataIndex: 'c',
			key: 'fileSize',
			width: 100,
		},
		{
			title: 'Operate',
			key: 'operate',
			width: 100,
			render: (text, record) => (
				<div className={styles.downBox}>
					<Tooltip title="Download the file">
						<img src={downImg} />
					</Tooltip>
					<Tooltip title="Download the package">
						<img src={downzipImg} />
					</Tooltip>
				</div>
			),
		},
	];
	const dataSource = [
		{
			key: 1,
			a: 'Logan River Observatory: Logan River near Tony Grove Aquatic Site (LR_TG_BA) Raw Data,Logan River Observatory: Logan River near Tony Grove Aquatic Site (LR_TG_BA) Raw Data',
			b: 'csv File',
			c: "3.8MB",
		}, {
			key: 2,
			a: 'Logan River Observatory: Logan River near Tony Grove Aquatic Site (LR_TG_BA) Raw Data',
			b: 'csv File',
			c: "3.8MB",
		}, {
			key: 3,
			a: 'Logan River Observatory: Logan River near Tony Grove Aquatic Site (LR_TG_BA) Raw Data',
			b: 'csv File',
			c: "3.8MB",
		}, {
			key: 4,
			a: 'Logan River Observatory: Logan River near Tony Grove Aquatic Site (LR_TG_BA) Raw Data',
			b: 'csv File',
			c: "3.8MB",
		}, {
			key: 5,
			a: 'Logan River Observatory: Logan River near Tony Grove Aquatic Site (LR_TG_BA) Raw Data',
			b: 'csv File',
			c: "3.8MB",
		}, {
			key: 6,
			a: 'Logan River Observatory: Logan River near Tony Grove Aquatic Site (LR_TG_BA) Raw Data',
			b: 'csv File',
			c: "3.8MB",
		}, {
			key: 7,
			a: 'Logan River Observatory: Logan River near Tony Grove Aquatic Site (LR_TG_BA) Raw Data',
			b: 'csv File',
			c: "3.8MB",
		}
	];
	const rowSelection = {
		onChange: (selectedRowKeys, selectedRows) => {
			setSelectedRowKeys(selectedRowKeys);
		}
	};
	return (
		<div>
			<DetailTitle title="Data" />
			<div className={classNames('flex_box', 'flex_between', 'align_center', styles.searchBox)}>
				<Input style={{ width: "280px" }} placeholder="Search by file name" />
				<div>
					<Button disabled={selectedRowKeys.length === 0} type="primary">Batch download</Button>
					<Button disabled={selectedRowKeys.length === 0} style={{ marginLeft: "20px" }} type="primary">Batch download package</Button>
				</div>
			</div>

			<Table
				rowSelection={rowSelection}
				size="small"
				scroll={{ y: "350px" }}
				pagination={false}
				dataSource={dataSource}
				columns={columns} />
		</div>
	)
}
export default FileList;